<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table {
				margin-top: 10px;
				border: 1px solid black;
				width: 1500px;
				text-align: center;
			}
		
			table tr td {
				border: 1px solid black;
				height: 100px;
			}
		
			img {
				width: 200px;
				height: 100px;
			}
			
			ul{
				list-style:none;
			}
			li{
				border:1px solid #ddd;
				float:left;
				margin-left:5px;
				width:50px;
				height:50px;
				text-align:center;
				line-height: 50px;
				cursor:pointer;
			}
			
			a{
				text-decoration: none;
				color:black;
			}
			.active{
				border:1px solid #4cAF50;
				background:#4cAF50;
				color:white;
			}
		</style>
		
		<script>
			let shops = [{
					"id": 1,
					"name": "铅笔",
					"price": "2",
					"img": "img/pencil.png",
				},
				{
					"id": 2,
					"name": '洗衣液',
					"price": '20',
					"img": "img/wash.png"
				},
				{
					"id": 3,
					"name": '橡皮擦',
					"price": '3',
					"img": "img/eraser.jpg"
				},
				{
					"id": 4,
					"name": '钢笔',
					"price": '10',
					"img": "img/pen.jpg"
				},
				{
					"id": 5,
					"name": '笔记本',
					"price": '2',
					"img": "img/computer.jpg"
				}
			]
			
			window.onload = function()
			{
				let tab = document.querySelector('table');
				let current = 1;
				
				function renderData(goods)
				{
					tab.innerHTML = '';
					goods.forEach((n,i) => tab.innerHTML 
						+=
							`<tr>
								<td>${current * 2 - 1 + i}</td>
								<td>
									<img src='${n.img}'/>
								</td>
								<td>${n.name}</td>
								<td>${n.price}</td>
							</tr>`
					)
				}
				renderData(shops.slice(0,2));
				
				// let page = shops.length % 2 == 0 ? shops.length / 2 : parseInt(shops.length / 2 + 1);	
				let page = Math.ceil(shops.length / 2);
				let div = document.querySelector('div');
				
				for(let i = 1; i <= page; i++)
				{
					if(i == 1)
					{
						div.innerHTML +=
						`
						<li class = 'active'><a href="#">${i}</a></li>
						`
					}
					else
					{
						div.innerHTML +=
						`
						<li><a href="#">${i}</a></li>
						`
					}
				}
				
				let lis =  div.querySelectorAll('li');
				
				let index = 0;
				for(let i = 0; i < lis.length; i++)
				{	
					lis[i].onclick = function()
					{
						current = i + 1;
						renderData(shops.slice(i * 2, i * 2 + 2))
						lis[index].className = '';
						lis[i].className = 'active';
						index = i;
					}
				}
				
				let next = document.querySelector('#next');
				
				next.onclick = function()
				{
					if(current != page)
					{
						lis[current - 1].className = '';
						current ++;
						lis[current - 1 ].className = 'active';
						renderData(shops.slice((current - 1) * 2, (current) * 2 ));
						index = current - 1;
					}
					
				}
				
				let prev = document.querySelector('#prev');
				
				prev.onclick = function()
				{
					if(current != 1)
					{
						lis[current - 1].className = '';
						current --;
						lis[current - 1 ].className = 'active';
						renderData(shops.slice((current - 1) * 2, (current) * 2 ));
						index = current - 1;
					}
					
				}
			}
		</script>
	</head>
	<body>
		<table></table>
		<ul>
			<li id="prev"><a href="#"><<</a></li>
			<div>
				
			</div>
			<li id="next"><a href="#">>></a></li>
		</ul>
	</body>
</html>